<template>
  <el-dialog
    :title="typeMsg + '房间信息'"
    :visible="dialogVisible"
    width="35%"
    top="50px"
    :before-close="handleDialogVisible"
    v-if="dialogVisible"
  >
    <el-form ref="form" :value="myRoomMsg" label-position="right">
      <el-form-item label="房间名" :label-width="formLabelWidth">
        <el-input v-model="myRoomMsg.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="petType" placeholder="请选择">
          <el-option
            v-for="item in petTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleUpdateRoom">确 定</el-button>
      <el-button @click="colseDialogVisible">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateRoom, addRoomMsg } from "@/apis/home";
import { EDITOR, ADD } from "@/configs/constant";
import uploadLimit from "@/mixins/uploadLimit";

export default {
  mixins: [uploadLimit],
  props: [
    "dialogVisible",
    "handleDialogVisible",
    "roomMsg",
    "paginationMsg",
    "getRoomListMsg",
    "colseDialogVisible",
    "type",
    "typeMsg",
  ],
  data() {
    return {
      formLabelWidth: "80px",
      myRoomMsg: {},
      petTypes: [
        {
          value: "猫类",
          label: "猫类",
        },
        {
          value: "狗类",
          label: "狗类",
        },
      ],
      petType: "",
    };
  },
  methods: {
    handleUpdateRoom() {
      this.$confirm(`确定要${this.typeMsg}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const fromMsg = {
            ...this.myRoomMsg,
            type: this.petType,
          };
          if (this.type === EDITOR) {
            const data = await updateRoom(fromMsg);
          } else if (this.type === ADD) {
            const data = await addRoomMsg(fromMsg);
          }
          const { pageNum, pageSize } = this.paginationMsg;
          this.getRoomListMsg(pageNum, pageSize);
          this.handleDialogVisible();
          this.$message({
            type: "success",
            message: `${this.typeMsg}成功!`,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${this.typeMsg}`,
          });
        });
    },
  },
  watch: {
    roomMsg(newVal, oldVal) {
      this.myRoomMsg = { ...newVal };
      this.petType = this.myRoomMsg.type;
    },
  },
};
</script>

<style lang="less" scoped>
form {
  padding: 0;
}
:deep .el-form-item {
  width: 100%;
}
</style>
